/*
 * @: 
 * @version: 1.0
 * @Author: ziwei
 * @Date: 2021-10-18 20:28:59
 * @LastEditors: ziwei
 * @LastEditTime: 2021-10-30 23:21:12
 */
import {useSelector,useDispatch} from '../react-redux'
import actions from '../store/actions/counter2'

// let boundAdd = bindActionCreators(add,store.dispatch);
// let boundMinus = bindActionCreators(minus,store.dispatch);
function Counter2(props){
    //在函数组件中 使用useSelector替换掉mapStateToProps
    let counter2 = useSelector(state=>state.counter2)
    let dispatch = useDispatch();
    //类似于mapDispatchToProps 将action Jinxing绑定返回绑定后的action
    //let {add2,minus2,changeColor} = useBoundDispatch(actions);
    const {number,color} = counter2;
    return ( 
        <div style={{color}}>
            <p>{number}</p>
            <button onClick={()=>dispatch(actions.add2())}>+</button>
            <button onClick={()=>dispatch(actions.minus2())}>-</button>
            <button onClick={()=>dispatch(actions.changeColor('green'))}>改成绿色</button>
        </div>
    )
}

export default Counter2
/* 
* 组件关联仓库两个方向 
* 输入 组件里使用仓库提供的状态进行组件的渲染
* 输出 在组件可以派发动作从而修改仓库的状态
*/